<template>
	<section class="vbox">
		<section class="w-f-md">
			<section class="hbox stretch bg-black dker">
				<!-- side content -->
				<aside class="col-sm-5 no-padder" id="sidebar">
					<section class="vbox animated fadeInUp">
						<section class="scrollable">
							<div class="m-t-n-xxs item pos-rlt">
								<div class="top text-right">
									<span class="musicbar animate bg-success bg-empty inline m-r-lg m-t" style="width:25px;height:30px">
										<span class="bar1 a3 lter"></span>
										<span class="bar2 a5 lt"></span>
										<span class="bar3 a1 bg"></span>
										<span class="bar4 a4 dk"></span>
										<span class="bar5 a2 dker"></span>
									</span>
								</div>
								<div class="bottom gd bg-info wrapper-lg">
									<span class="pull-right text-sm">101,400 <br>Followers</span>
									<span class="h2 font-thin">Soph Ashe</span>
								</div>
								<img class="img-full" src="/static/images/m43.jpg" alt="...">
							</div>
							<ul class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
								<li class="list-group-item">
									<div class="pull-right m-l">
										<a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
										<a href="#" class="m-r-sm"><i class="icon-plus"></i></a>
										<a href="#"><i class="icon-close"></i></a>
									</div>
									<a href="#" class="jp-play-me m-r-sm pull-left">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<div class="clear text-ellipsis">
										<span>E.T.M</span>
										<span class="text-muted"> -- 04:35</span>
									</div>
								</li>
								<li class="list-group-item">
									<div class="pull-right m-l">
										<a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
										<a href="#"><i class="icon-plus"></i></a>
									</div>
									<a href="#" class="jp-play-me m-r-sm pull-left">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<div class="clear text-ellipsis">
										<span>Vestibulum id ligula porta</span>
										<span class="text-muted"> -- 04:15</span>
									</div>
								</li>
								<li class="list-group-item">
									<div class="pull-right m-l">
										<a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
										<a href="#"><i class="icon-plus"></i></a>
									</div>
									<a href="#" class="jp-play-me m-r-sm pull-left">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<div class="clear text-ellipsis">
										<span>Praesent commodo cursus magna</span>
										<span class="text-muted"> -- 02:25</span>
									</div>
								</li>
								<li class="list-group-item">
									<div class="pull-right m-l">
										<a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
										<a href="#"><i class="icon-plus"></i></a>
									</div>
									<a href="#" class="jp-play-me m-r-sm pull-left">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<div class="clear text-ellipsis">
										<span>Curabitur blandit tempus</span>
										<span class="text-muted"> -- 05:00</span>
									</div>
								</li>
								<li class="list-group-item">
									<div class="pull-right m-l">
										<a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
										<a href="#"><i class="icon-plus"></i></a>
									</div>
									<a href="#" class="jp-play-me m-r-sm pull-left">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<div class="clear text-ellipsis">
										<span>Faucibus dolor auctor</span>
										<span class="text-muted"> -- 03:50</span>
									</div>
								</li>
								<li class="list-group-item">
									<div class="pull-right m-l">
										<a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
										<a href="#"><i class="icon-plus"></i></a>
									</div>
									<a href="#" class="jp-play-me m-r-sm pull-left">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<div class="clear text-ellipsis">
										<span>Get lacinia odio sem nec elit cibus dolor auctor sed odio dui mollis ornare</span>
										<span class="text-muted"> -- 04:05</span>
									</div>
								</li>
								<li class="list-group-item">
									<div class="pull-right m-l">
										<a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
										<a href="#"><i class="icon-plus"></i></a>
									</div>
									<a href="#" class="jp-play-me m-r-sm pull-left">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<div class="clear text-ellipsis">
										<span>Faucibus dolor auctor</span>
										<span class="text-muted"> -- 02:55</span>
									</div>
								</li>
								<li class="list-group-item">
									<div class="pull-right m-l">
										<a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
										<a href="#"><i class="icon-plus"></i></a>
									</div>
									<a href="#" class="jp-play-me m-r-sm pull-left">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<div class="clear text-ellipsis">
										<span>Donec sed odio dui</span>
										<span class="text-muted"> -- 04:35</span>
									</div>
								</li>
								<li class="list-group-item">
									<div class="pull-right m-l">
										<a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
										<a href="#"><i class="icon-plus"></i></a>
									</div>
									<a href="#" class="jp-play-me m-r-sm pull-left">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<div class="clear text-ellipsis">
										<span>Urna mollis ornare vel eu leo</span>
										<span class="text-muted"> -- 05:10</span>
									</div>
								</li>
								<li class="list-group-item">
									<div class="pull-right m-l">
										<a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
										<a href="#"><i class="icon-plus"></i></a>
									</div>
									<a href="#" class="jp-play-me m-r-sm pull-left">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<div class="clear text-ellipsis">
										<span>Vivamus sagittis lacus vel augue</span>
										<span class="text-muted"> -- 02:35</span>
									</div>
								</li>
							</ul>
						</section>
					</section>
				</aside>
				<!-- / side content -->
				<section class="col-sm-4 no-padder bg">
					<section class="vbox">
						<section class="scrollable hover">
							<ul class="list-group list-group-lg no-bg auto m-b-none m-t-n-xxs">
								<li class="list-group-item clearfix">
									<a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<a href="#" class="pull-left thumb-sm m-r">
										<img src="/static/images/m0.jpg" alt="...">
									</a>
									<a class="clear" href="#">
										<span class="block text-ellipsis">Little Town</span>
										<small class="text-muted">by Soph Ashe</small>
									</a>
								</li>
								<li class="list-group-item clearfix">
									<a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<a href="#" class="pull-left thumb-sm m-r">
										<img src="/static/images/a1.png" alt="...">
									</a>
									<a class="clear" href="#">
										<span class="block text-ellipsis">Get lacinia odio sem nec elit</span>
										<small class="text-muted">by Filex</small>
									</a>
								</li>
								<li class="list-group-item clearfix">
									<a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<a href="#" class="pull-left thumb-sm m-r">
										<img src="/static/images/a2.png" alt="...">
									</a>
									<a class="clear" href="#">
										<span class="block text-ellipsis">Donec sed odio du</span>
										<small class="text-muted">by Dan Doorack</small>
									</a>
								</li>
								<li class="list-group-item clearfix">
									<a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<a href="#" class="pull-left thumb-sm m-r">
										<img src="/static/images/a3.png" alt="...">
									</a>
									<a class="clear" href="#">
										<span class="block text-ellipsis">Curabitur blandit tempu</span>
										<small class="text-muted">by Foxes</small>
									</a>
								</li>
								<li class="list-group-item clearfix">
									<a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<a href="#" class="pull-left thumb-sm m-r">
										<img src="/static/images/a4.png" alt="...">
									</a>
									<a class="clear" href="#">
										<span class="block text-ellipsis">Urna mollis ornare vel eu leo</span>
										<small class="text-muted">by Chris Fox</small>
									</a>
								</li>
								<li class="list-group-item clearfix">
									<a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<a href="#" class="pull-left thumb-sm m-r">
										<img src="/static/images/a5.png" alt="...">
									</a>
									<a class="clear" href="#">
										<span class="block text-ellipsis">Faucibus dolor auctor</span>
										<small class="text-muted">by Lauren Taylor</small>
									</a>
								</li>
								<li class="list-group-item clearfix">
									<a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<a href="#" class="pull-left thumb-sm m-r">
										<img src="/static/images/a6.png" alt="...">
									</a>
									<a class="clear" href="#">
										<span class="block text-ellipsis">Praesent commodo cursus magn</span>
										<small class="text-muted">by Chris Fox</small>
									</a>
								</li>
								<li class="list-group-item clearfix">
									<a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<a href="#" class="pull-left thumb-sm m-r">
										<img src="/static/images/a7.png" alt="...">
									</a>
									<a class="clear" href="#">
										<span class="block text-ellipsis">Vestibulum id</span>
										<small class="text-muted">by Milian</small>
									</a>
								</li>
								<li class="list-group-item clearfix">
									<a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<a href="#" class="pull-left thumb-sm m-r">
										<img src="/static/images/a8.png" alt="...">
									</a>
									<a class="clear" href="#">
										<span class="block text-ellipsis">Blandit tempu</span>
										<small class="text-muted">by Amanda Conlan</small>
									</a>
								</li>
								<li class="list-group-item clearfix">
									<a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<a href="#" class="pull-left thumb-sm m-r">
										<img src="/static/images/a9.png" alt="...">
									</a>
									<a class="clear" href="#">
										<span class="block text-ellipsis">Vestibulum ullamcorpe quis malesuada augue mco rpe</span>
										<small class="text-muted">by Dan Doorack</small>
									</a>
								</li>
								<li class="list-group-item clearfix">
									<a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<a href="#" class="pull-left thumb-sm m-r">
										<img src="/static/images/a10.png" alt="...">
									</a>
									<a class="clear" href="#">
										<span class="block text-ellipsis">Natis ipsum ac feugiat</span>
										<small class="text-muted">by Hamburg</small>
									</a>
								</li>
								<li class="list-group-item clearfix">
									<a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
										<i class="icon-control-play text"></i>
										<i class="icon-control-pause text-active"></i>
									</a>
									<a href="#" class="pull-left thumb-sm m-r">
										<img src="/static/images/a0.png" alt="...">
									</a>
									<a class="clear" href="#">
										<span class="block text-ellipsis">Sec condimentum au</span>
										<small class="text-muted">by Amanda Conlan</small>
									</a>
								</li>
							</ul>
						</section>
					</section>
				</section>
				<section class="col-sm-3 no-padder lt">
					<section class="vbox">
						<section class="scrollable hover">
							<div class="m-t-n-xxs">
								<div class="item pos-rlt">
									<a href="#" class="item-overlay active opacity wrapper-md font-xs">
										<span class="block h3 font-bold text-info">Find</span>
										<span class="text-muted">Search the music you like</span>
										<span class="bottom wrapper-md block">- <i class="icon-arrow-right i-lg pull-right"></i></span>
									</a>
									<a href="#">
										<img class="img-full" src="/static/images/m40.jpg" alt="...">
									</a>
								</div>
								<div class="item pos-rlt">
									<a href="#" class="item-overlay active opacity wrapper-md font-xs text-right">
										<span class="block h3 font-bold text-warning text-u-c">Listen</span>
										<span class="text-muted">Find the peace in your heart</span>
										<span class="bottom wrapper-md block"><i class="icon-arrow-right i-lg pull-left"></i> -</span>
									</a>
									<a href="#">
										<img class="img-full" src="/static/images/m41.jpg" alt="...">
									</a>
								</div>
								<div class="item pos-rlt">
									<a href="#" class="item-overlay active opacity wrapper-md font-xs">
										<span class="block h3 font-bold text-success text-u-c">Share</span>
										<span class="text-muted">Share the good songs with your loves</span>
										<span class="bottom wrapper-md block">- <i class="icon-arrow-right i-lg pull-right"></i></span>
									</a>
									<a href="#">
										<img class="img-full" src="/static/images/m42.jpg" alt="...">
									</a>
								</div>
								<div class="item pos-rlt">
									<a href="#" class="item-overlay active opacity wrapper-md font-xs text-right">
										<span class="block h3 font-bold text-white text-u-c">2014</span>
										<span class="text-muted">Find, Listen & Share</span>
										<span class="bottom wrapper-md block"><i class="icon-arrow-right i-lg pull-left"></i> -</span>
									</a>
									<a href="#">
										<img class="img-full" src="/static/images/m44.jpg" alt="...">
									</a>
								</div>
								<div class="item pos-rlt">
									<a href="#" class="item-overlay active opacity wrapper-md font-xs">
										<span class="block h3 font-bold text-danger-lter text-u-c">Top10</span>
										<span class="text-muted">Selected songs</span>
										<span class="bottom wrapper-md block">- <i class="icon-arrow-right i-lg pull-right"></i></span>
									</a>
									<a href="#">
										<img class="img-full" src="/static/images/m45.jpg" alt="...">
									</a>
								</div>
							</div>
						</section>
					</section>
				</section>
			</section>
		</section>
		<footer class="footer bg-info dker">
			<musicPlayer :palyList='palyList'></musicPlayer>
		</footer>
	</section>
</template>

<script>
	export default {
		data(){
			return {
				palyList: []
			}
		},
		components: {
			
		}
	}
</script>

<style>
</style>
